<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>代码生成工具</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport" content="width=1200"/>
    <link rel="icon" th:href="@{/img/favicon.ico}" type="image/x-icon"/>
    <link rel="stylesheet" th:href="@{/css/element-ui.css}">
    <link rel="stylesheet" th:href="@{/css/animate.css}">
    <style>
        #app {
            position: absolute;
            top: 30%;
            left: 50%;
            width:400px;
            margin-left: -200px;
            margin-top: -50px;
        }

        #app button {
            width: 100%;
            margin: 10px auto;
        }

        body {
            background-color: #193c6d;
            filter: progid: DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#003073', endColorstr='#029797');
            background-image: url(//img.alicdn.com/tps/TB1d.u8MXXXXXXuXFXXXXXXXXXX-1900-790.jpg);
            background-size: 100%;
            background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0, #003073), color-stop(100%, #029797));
            background-image: -webkit-linear-gradient(135deg, #003073, #029797);
            background-image: -moz-linear-gradient(45deg, #003073, #029797);
            background-image: -ms-linear-gradient(45deg, #003073 0, #029797 100%);
            background-image: -o-linear-gradient(45deg, #003073, #029797);
            background-image: linear-gradient(135deg, #003073, #029797);
            text-align: center;
            margin: 0px;
            overflow: hidden;
        }

        a {
            color: #0078ff;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="mydiv" class="login-container">
        <h2 style="text-align: center;color:white;" class="animated jackInTheBox">mybatis-plus 代码在线生成工具</h2>
        <br>
        <br>
        <el-form ref="form" :model="form" label-width="0px">
            <el-form-item class="animated bounceInLeft">
                <el-input pl v-model="form.username" placeholder="用户名"></el-input>
            </el-form-item>
            <el-form-item class="animated bounceInLeft">
                <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
            </el-form-item>
            <el-form-item class="animated rubberBand">
                <el-button type="primary" @click="onSubmit">登录</el-button>
            </el-form-item>
            <el-form-item>
                <label style="font-weight: bold;color:white;" class="animated wobble">author: jack-cooper</label>
            </el-form-item>
        </el-form>
    </div>
</div>

<script th:src="@{/js/util/jquery.js}"></script>
<script th:src="@{/js/util/vue.js}"></script>
<script th:src="@{/js/util/vue-resource.js}"></script>
<script th:src="@{/js/util/element-ui-2.12.0.js}"></script>
<script th:src="@{/js/util/util-core.js}"></script>
<script th:src="@{/js/plugins/three/three.min.js}"></script>
<script th:src="@{/js/plugins/three/background.js}"></script>


<script th:inline="javascript">
    $UC = {
        ctxPath: /*[[${#httpServletRequest.getContextPath()}]]*/ null,
        ctxStatic: /*[[${#httpServletRequest.getContextPath()}]]*/ null
    };
</script>

<script language="javascript">
    if (window != top)
        top.location.href = location.href;
</script>

<script>
    var data = {
        form: {
            username:'admin',
            password:'admin'
        }
    };
    new Vue({
        el: '#app',
        data: data,
        methods: {
            onSubmit: function () {
                var _this = this;
                console.log(_this.form)
                $UU.http.post("/login", {"username":_this.form.username,"password":_this.form.password}, function (data) {
                        //获取回调数据
                        if (data) {
                            _this.$message.success("登录成功");
                            top.location.href = $UC.ctxPath + "/index";
                        }else{
                            _this.$message.success("用户名密码错误");
                        }

                    }
                );
            },
            logout: function () {
                location.href = $UC.ctxPath + "/logout";
            }
        }

    });

</script>
</body>

</html>
